<template>
  <div>
    <div class="fcRightBox">
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div>
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="创意管理" name="first">

                <div class="">
                  <div class="contentHeader">

                    <div style="width: 370px;display: flex;align-content: center;justify-content: space-between">
                      <el-button class="buttonAdd" @click="btnXiu">新建创意</el-button>
                      <el-input placeholder="请搜索单元" style="width: 200px" v-model="form.promotionName" @change="queryList"></el-input>
                      <el-button class="buttonBtn" @click="btnXiu">筛选</el-button>
                    </div>
                    <div class="contentHeader_right" style="justify-content: flex-end">

                      <el-date-picker class="custom-date-picker"
                                      format="yyyy/MM/dd"
                                      v-model="timerArray"
                                      style="width: 240px;;margin-right: 16px "
                                      type="daterange"
                                      align="right"
                                      range-separator="~"
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                      @change="queryList"
                                      :picker-options="pickerOptions">
                        <template slot="prefix">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                               height="24"
                               class="custom-icon" focusable="false">
                            <path fill="currentColor"
                                  d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                          </svg>
                        </template>
                      </el-date-picker>
                      <el-dropdown style="margin-right: 16px">
                        <el-button type="primary"
                                   style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value111
                    }}</span>

                          <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-for="item in options11" :key="item.value">{{
                              item.label
                            }}
                          </el-dropdown-item>

                        </el-dropdown-menu>
                      </el-dropdown>
                      <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择"
                                 class="select-with-prefix1">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                      <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px; " @click="handleTabClick">
                        重置列宽
                      </el-button>


                    </div>
                  </div>
                  <el-table
                      :data="tableList"
                      style="width: 100%;background: #EBEDF5"
                      :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column fixed
                                     type="selection"
                                     min-width="55">
                    </el-table-column>
                    <el-table-column
                        fixed
                        prop="keyword"
                        label="标签" sortable
                        min-width="80"
                    >
                      <template slot-scope="scope">
                        <div class="one-table-row-cell-content">
                          <div class="materiel-list-row-tag">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24"
                                 class="dls-icon " focusable="false" style="font-size: 18px;">
                              <path fill="currentColor" fill-rule="evenodd"
                                    d="M9.028 7.17a3.502 3.502 0 1 0 3.502 6.067A3.502 3.502 0 0 0 9.028 7.17zm.454 3.783a1.498 1.498 0 1 1 2.594-1.498 1.498 1.498 0 0 1-2.594 1.498z"
                                    clip-rule="evenodd"></path>
                              <path fill="currentColor" fill-rule="evenodd"
                                    d="M9.236 1.921a4 4 0 0 0-4.858 2.805L2.956 9.86a3 3 0 0 0 .293 2.3l4.885 8.462a5 5 0 0 0 6.83 1.83l4.33-2.5a5 5 0 0 0 1.83-6.83L16.24 4.661a3 3 0 0 0-1.846-1.404L9.236 1.92zM6.306 5.26a2 2 0 0 1 2.428-1.402l5.158 1.336a1 1 0 0 1 .615.468l4.885 8.461a3 3 0 0 1-1.098 4.098l-4.33 2.5a3 3 0 0 1-4.098-1.098l-4.885-8.461a1 1 0 0 1-.098-.767L6.305 5.26z"
                                    clip-rule="evenodd"></path>
                            </svg>
                          </div>
                        </div>
                      </template>

                    </el-table-column>
                    <el-table-column
                        align="left"
                        prop="originality"
                        label="创意"
                        min-width="280"
                    >
                      <template slot-scope="scope">
                        <div v-if="scope.row.originality !== '-' && scope.row.originality !== undefined">
                          <div
                              class="brave-the-winds-common-libs-creative-preview-mobile brave-the-winds-common-libs-creative-preview brave-the-winds-common-libs-creative-preview-border">
                            <div class="title">
                              <div><u></u><u>{{ extractCompanyName(scope.row.originality) }}</u>-{{ extractCompanyNameAfter(scope.row.originality) }}</div>
                            </div>
                            <div class="brave-the-winds-common-libs-creative-preview-mobile-text" pictureurl="">
                              <div><u></u><u> {{ extractCompanyName(scope.row.originalityContent) }}</u>{{ extractCompanyNameAfter(scope.row.originalityContent) }}</div>
                            </div>
                            <div class="brave-the-winds-common-libs-creative-preview-footer-mobile">
                              <div class="content">
                                <div class="url">{{ scope.row.searchWebsite}}</div>
                                <div class="ads">广告</div>
                                <img class="ensure-svg"
                                     src="https://tuiguang-s3.bdstatic.com/commonLibs/static/media/ensure.b395fe10..svg"
                                     alt=""></div>
                              <div class="ellipsis">...</div>
                            </div>
                          </div>
                        </div>
                        <div v-else>
                          -
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="promotionPlan"
                        label="推广计划"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="promotionUnit"
                        label="推广单元">

                    </el-table-column>
                    <el-table-column
                        prop="sourceMaterial"
                        label="素材"
                        sortable
                        min-width="180">
                    </el-table-column>


                    <el-table-column
                        prop="originalityId"
                        label="创意ID"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="libraryType"
                        label="状态">
                    </el-table-column>
                    <el-table-column
                        prop="visitWebsite"
                        label="计算机最终访问网址"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="websiteMonitoring"
                        label="计算机访问网址监控后缀"
                        sortable
                        min-width="180">
                    </el-table-column>

                    <el-table-column
                        prop="finalVisit"
                        label="移动最终访问网址">
                    </el-table-column>
                    <el-table-column
                        prop="mobileMonitoring"
                        label="移动访问网址监控后缀"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="projectMode"
                        label="项目模式"
                        sortable
                        min-width="180">
                    </el-table-column>


                    <el-table-column
                        prop="toShow"
                        label="展现"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="click"
                        label="点击"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="consumption"
                        label="消费">
                    </el-table-column>
                    <el-table-column
                        prop="clickRate"
                        label="点击率"
                        min-width="180"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.clickRate}}%  </template>
                    </el-table-column>
                    <el-table-column
                        prop="avgClickPrice"
                        label="平均点击价格"
                        sortable
                        min-width="140">
                    </el-table-column>
                    <el-table-column
                        prop="genMethod"
                        label="生成方式"
                        sortable
                        min-width="140">
                    </el-table-column>
                  </el-table>

                <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="创意图片管理" name="second">
                <div class="headerBox">
                  <a class="headerBtn" @click.stop="form.picType='自提图片';queryList()"
                     :class="form.picType=='自提图片'?'btnOn ':''">自提图片</a>
                  <a class="headerBtn" @click.stop="form.picType='自动图片';queryList()"
                     :class="form.picType=='自动图片'?'btnOn ':''" style="border-color: transparent">自动图片</a>



                </div>

                <div class="">
                  <div class="contentHeader">

                    <div style="width: 370px;display: flex;align-content: center;justify-content: space-between">
                      <el-button class="buttonAdd" @click="btnXiu" v-if="form.picType=='自提图片'" >新建图片</el-button>
                    </div>
                    <div style="min-width:340px;display: flex;align-content: center;justify-content: space-between">
                      <button @click="btnXiu" style="width: 34px;height: 32px" type="button" name=""
                              class="one-button refresh-operation one-main one-button-normal one-button-medium"><span><div
                          class="one-loading-nested-loading one-loading-nested-loading-normal"><div
                          class="one-loading-container"><svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24" min-width="14" height="14" class="dls-icon " focusable="false"><path
                          fill="currentColor"
                          d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path></svg></div></div></span>
                      </button>
                      <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                          style="width: 70%; width:200px"
                          size="small"
                          v-model="timerArray"
                          @change="queryList"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          :clearable="false"
                          range-separator="~"
                          type="daterange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                      </el-date-picker>
                      <el-button class="buttonBtn" @click="handleTabClick">重置列宽</el-button>
                    </div>

                  </div>
                  <el-table
                      :data="tableList"
                      style="width: 100%;background: #EBEDF5"
                      :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column fixed
                                     type="selection"
                                     min-width="55">
                    </el-table-column>
                    <el-table-column
                        prop="pic"
                        label="图片"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="picTitle"
                        label="主题">
                    </el-table-column>
                    <el-table-column
                        prop="picProportion"
                        label="图片比例">
                    </el-table-column>
                    <el-table-column
                        prop="投放范围"
                        label="素材"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="libraryType"
                        label="状态">
                    </el-table-column>
                    <el-table-column
                        prop="toShow"
                        label="展现"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="click"
                        label="点击"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="consumption"
                        label="消费">
                    </el-table-column>
                    <el-table-column
                        prop="clickRate"
                        label="点击率"
                        min-width="180"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.clickRate}}%  </template>
                    </el-table-column>
                    <el-table-column
                        prop="avgClickPrice"
                        label="平均点击价格"
                        sortable
                        min-width="140">
                    </el-table-column>
                  </el-table>

                <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="创意视频管理" name="third">

                <div class="">
                  <div class="contentHeader">

                    <div style="width: 370px;display: flex;align-content: center;justify-content: space-between">
                      <el-button class="buttonAdd" @click="btnXiu" v-if="form.picType=='自提图片'" >新建图片</el-button>
                    </div>
                    <div style="min-width:300px;display: flex;align-content: center;justify-content: space-between">

                      <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                          style="width: 70%; width:200px"
                          size="small"
                          v-model="timerArray"
                          @change="queryList"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          :clearable="false"
                          range-separator="~"
                          type="daterange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                      </el-date-picker>
                      <el-button class="buttonBtn" @click="handleTabClick">重置列宽</el-button>
                    </div>

                  </div>
                  <el-table
                      :data="tableList"
                      style="width: 100%;background: #EBEDF5"
                      :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column fixed
                                     type="selection"
                                     min-width="55">
                    </el-table-column>
                    <el-table-column
                        prop="videoComponents"
                        label="视频"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="videoName"
                        label="视频名称">
                    </el-table-column>
                    <el-table-column
                        prop="picProportion"
                        label="图片比例">
                    </el-table-column>
                    <el-table-column
                        prop="投放范围"
                        label="素材"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="libraryType"
                        label="状态">
                    </el-table-column>
                    <el-table-column
                        prop="toShow"
                        label="展现"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="click"
                        label="点击"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="consumption"
                        label="消费">
                    </el-table-column>
                    <el-table-column
                        prop="clickRate"
                        label="点击率"
                        min-width="180"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.clickRate}}%  </template>
                    </el-table-column>
                    <el-table-column
                        prop="avgClickPrice"
                        label="平均点击价格"
                        sortable
                        min-width="140">
                    </el-table-column>
                  </el-table>

                <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="动态创意屏蔽 " name="four">
                <div class="headerBox">
                  <a class="headerBtn" @click.stop="form.shieldType='创意文案屏蔽';queryList()"
                     :class="form.shieldType=='创意文案屏蔽'?'btnOn ':''">创意文案屏蔽</a>
                  <a class="headerBtn" @click.stop="form.shieldType='创意图片屏蔽';queryList()"
                     :class="form.shieldType=='创意图片屏蔽'?'btnOn ':''" style="border-color: transparent">创意图片屏蔽</a>
                  <a class="headerBtn" @click.stop="form.shieldType='创意组件网址屏蔽';queryList()"
                     :class="form.shieldType=='创意组件网址屏蔽'?'btnOn ':''" style="border-color: transparent">创意组件网址屏蔽</a>

                </div>

                <div class="">
                  <div class="contentHeader">

                    <div style="width: 370px;display: flex;align-content: center;justify-content: space-between">
                      <el-button class="buttonAdd" @click="btnXiu" v-if="form.shieldType=='创意文案屏蔽'" >新建创意文案屏蔽</el-button>
                      <el-button class="buttonAdd" @click="btnXiu" v-if="form.shieldType=='创意图片屏蔽'" >新建创意图片屏蔽</el-button>
                      <el-button class="buttonAdd" @click="btnXiu" v-if="form.shieldType=='创意组件网址屏蔽'" >新建网址屏蔽</el-button>

                    </div>

                  </div>
                  <el-table
                      :data="tableList"
                      style="width: 100%;background: #EBEDF5"
                      :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column fixed
                                     type="selection"
                                     min-width="55">
                    </el-table-column>
                    <el-table-column
                        prop="blockContent"
                        label="屏蔽内容"
                        sortable
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="caozuo"
                        label="操作">
                    </el-table-column>

                  </el-table>

                <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from "echarts";
import {
  getPromotionOriginalityList,getPromotionOriginalityPicList,getPromotionVideoClassList,getPromotionOriginalityShieldList

} from "@/services/model/managecenter";
import {getLocalStorageItem} from "@/utils/storage-helper";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      isToggleStatus: false,
      chart: null,
      value: "下载",
      // 分页参数
      userInfo: getLocalStorageItem("userInfo"),

      form: {
        shieldType:'创意文案屏蔽',
        picType: '自提图片', // 确保有初始值
        marketingType:'电话',
        userId: getLocalStorageItem("userInfo").userId,
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      value111: '自定义列',
      options2: [
        {
          value: "下载",
          label: "下载",
        },
        {
          value: "发送邮箱",
          label: "发送邮箱",
        },
        {
          value: "下载设置",
          label: "下载设置",
        },
      ],
      options: [
        {
          value: 0,
          label: "合计",
        },
        {
          value: 1,
          label: "分时",
        },
        {
          value: 2,
          label: "分日",
        },
        {
          value: 3,
          label: "分周",
        },
        {
          value: 4,
          label: "分月",
        },
      ],
      isSelect: "账户整体",
      activeName: "first",
    };
  },

  mounted() {
    this.queryList();
  },
  methods: {
    extractCompanyName(content) {
      if (typeof content !== 'string' || content === undefined) {
        return ''; // 或者返回一个默认值
      }
      const companyIndex = content.lastIndexOf('公司');
      if (companyIndex !== -1) {
        console.log(content.substring(0, companyIndex + 2))
        // 截取“公司”及其之前的部分
        return content.substring(0, companyIndex + 2); // +2 是为了包含“公司”这两个字
      }
      // 如果没有找到“公司”，返回原始内容或空字符串（根据你的需求）
      return '';
    },
    extractCompanyNameAfter(content) {
      if (typeof content !== 'string' || content === undefined) {
        return ''; // 或者返回一个默认值
      }
      const companyIndex = content.indexOf('公司');
      if (companyIndex !== -1) {
        // 截取“公司”之后的部分（不包括“公司”本身）
        return content.substring(companyIndex + 2); // +2 是为了跳过“公司”这两个字
      }
      // 如果没有找到“公司”，返回空字符串或原始内容（取决于您的需求）
      return '';
    }
    ,
    handleClick(tab) {
      this.activeName = tab.name;
      // 清空
      this.form = {
        userId: getLocalStorageItem("userInfo").userId,
        pageNum: 1,
        pageSize: 20,
        total: 0,
        picType: '自提图片', // 确保有初始值
        marketingType:'电话',
        shieldType:'创意文案屏蔽',
      };

      (this.timerArray = [new Date(), new Date()]), // 初始化为 null 或合适的日期值，;
          this.queryList();
    },
    // 关键词
    async queryList() {

      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let res = [];
      this.tableList = [];
      res =
      this.activeName === "first"
              ? await getPromotionOriginalityList(this.form)
              : this.activeName === "second"
              ? await getPromotionOriginalityPicList(this.form)
              : this.activeName === "third"
                  ? await getPromotionVideoClassList(this.form)
                  : await getPromotionOriginalityShieldList(this.form)
       const modifiedArray = this.replaceNullWithDash( res.rows);
                this.tableList = modifiedArray|| [];
       this.form.total = Math.ceil(Number(res.total) );;
    },
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }
      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background-color: rgb(255, 255, 255);
    padding: 0px 24px 24px;
    border-radius: 6px;
    margin-bottom: 42px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }
  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67c23a;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  background-color: rgb(255, 255, 255);

.el-input__inner {
  height: 32px;
  line-height: 32px;
}

}
.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buttonAdd {
  background: #0054e6;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonDis {
  background: #dce9ff;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonDis:hover {
  background: #dce9ff;
  color: white;

}

.buttonBtn {
  background: #e2e6f0;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.refresh-operation {
  width: 32px;
  align-items: center;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button-medium {
  font-size: 14px;
}

.interpret-container {
  width: 100%;
  border-radius: 6px;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 30px;
  background-image: linear-gradient(to bottom right, #bfe8ff -50%, #fff 35%);
  background-color: #fff;
  background-repeat: no-repeat;
  margin-bottom: 8px;
}

.interpret-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.interpret-container .interpret-header-logo {
  width: 21px;
  height: 21px;
  margin-right: 10px;
}

.interpret-container .interpret-content {
  margin-top: 10px;
  border-radius: 10px;
  border-left: 2px solid #729cfe;
  background: #e5eeff;
  box-sizing: border-box;
  padding: 10px 30px;
}

.interpret-container .interpret-content > div::marker {
  color: #729cfe;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

.headerBtn {
  height: auto;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  color: #13161AE6;
  border-right: 1px solid #d3d9e6;
}

.headerBox {
  margin: 10px 0;
  margin-bottom: 20px;
}

.btnOn {
  color: #0054e6 !important;
}
.one-alert-show-icon {
  position: relative;
}
.one-alert-no-title {
  padding: 4px 16px;
}
.one-alert {
  border-width: 1px;
  border-style: solid;
}
.one-alert-medium .one-alert-icon, .one-alert-medium .one-alert-content {
  font-size: 14px;
}
.one-alert-info .one-alert-icon {
  color: #0054e6;
}
.one-alert-show-icon .one-alert-icon {
  position: absolute;
  left: 16px;
  line-height: 1.6;
  height: 1.6em;
}

.one-alert-content {
  color: rgba(19, 22, 26, 0.9);
  line-height: 1.6;
}
.one-alert-medium.one-alert-show-icon {
  padding-left: 38px;
}
.one-alert-medium {
  border-radius: 4px;
}
.one-alert-info {
  background-color: #ebf2ff;
  border-color: transparent;
}
.one-alert-show-icon {
  position: relative;
}
.one-alert-no-title {
  padding: 4px 16px;
}
.one-alert {
  border-width: 1px;
  border-style: solid;
}.brave-the-winds-common-libs-creative-preview-mobile {
   position: relative;
   width: 246px;
 }
.brave-the-winds-common-libs-creative-preview-border {
  border: 1px solid #e2e6f0;
}
.brave-the-winds-common-libs-creative-preview {
  padding: 12px 8px;
  background: #fff;
  border-radius: 4px;
}
.brave-the-winds-common-libs-creative-preview-mobile .title {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #000;
}
.brave-the-winds-common-libs-creative-preview-mobile .title div {
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.brave-the-winds-common-libs-creative-preview-mobile-text {
  overflow: hidden;
  font-size: 12px;
  color: #525252;
  margin: 8px 0;
  text-align: justify;
  word-break: break-all;
}
.brave-the-winds-common-libs-creative-preview-mobile-text div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 54px;
  line-height: 18px;
}
.brave-the-winds-common-libs-creative-preview u {
  text-decoration: none;
  color: #f11;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile {
  display: flex;
  color: #b8b8b8;
  justify-content: space-between;
  font-size: 12px;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content {
  color: #b8b8b8;
  transform: scale(0.84);
  transform-origin: 0 0;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content .url {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content .ads {
  margin-left: 4px;
  color: #8fbcff;
  width: 25px;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content img.ensure-svg {
  transform: scale(1.2);
  margin-left: 8px;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .ellipsis {
  margin-top: -4px;
  margin-left: -8px;
}
</style>
